<template>
    <n-modal v-model:show="show">
    <n-card
      style="width: 800px"
      :bordered="false"
      :mask-closable="true"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <!-- <template #header-extra>
        噢！
      </template> -->
      <div class="form-popup">
            <div class="dialog-box-title">
                <h3>私人专属行程定制</h3><span class="dialog-box-close" @click="onClose">×</span>
            </div>
            <form>
                <input name="action_type" type="hidden" value="dinzhi" />
                <input name="type" type="hidden" value="在线定制" />
                <div class="form_a">
                    <dl>
                        <dt>称呼：</dt>
                        <dd><input v-model="data.name" class="text" name="name" type="text"></dd>
                    </dl>

                    <dl>
                        <dt>联系方式：</dt>
                        <dd>
                            <input v-model="data.tel" class="text" name="tel" type="text" placeholder="电话/QQ/微信/邮箱"
                                required>
                        </dd>
                    </dl>
                    <dl>
                        <dt>人数：</dt>
                        <dd>
                            <input v-model="data.nums" class="text" name="nums" type="text">
                        </dd>
                    </dl>
                    <dl>
                        <dt>备注：</dt>
                        <dd>
                            <textarea v-model="data.question" class="textarea" name="question" cols=""
                                rows=""></textarea>
                        </dd>
                    </dl>
                    <dl>
                        <dt></dt>
                        <dd>
                            <div @click="submit" class="submit-btn">立即预订</div>
                        </dd>
                    </dl>
                </div>
            </form>
        </div>
      <!-- <template #footer>
        尾部
      </template> -->
    </n-card>
  </n-modal>
   
</template>

<script setup>
import { ref } from 'vue'
import { other_demand_add } from '@/api/travel'


let show= ref(false)

let data = ref({
    name: '',
    question: '',
    nums: '',
    tel: '',
})

const open = () => {
    // console.log('打开')
    show.value = true;
}
const onClose = () => {
    show.value = false;
    data.value = {
        name: '',
        question: '',
        nums: '',
        tel: '',
    }
}

const submit = async () => {
    // 检查手机号
    if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.value.tel)) {
        // console.log('手机号格式错误')
        // ElMessageBox.alert('手机号格式错误', '提示', {
        //     // if you want to disable its autofocus
        //     // autofocus: false,
        //     confirmButtonText: '确定',
        //     callback: (action) => {

        //     },
        // })
        return;
    }
    let res = await other_demand_add(data.value);
    onClose();
}



defineExpose({
    open
});

</script>


<style scoped>
.shade {
    /* width: 100vw;
    height: 100vh;
    background: red;
    position: fixed;
    top: 0; */
    /* background: rgba(0,0,0,0.5); */
}

.form-popup {
    position: fixed;
    z-index: 99;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 800px;
    height: 500px;
}

.submit-btn {
    width: 200px;
    text-align: center;
    border: none;
    background: #02b1a9;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 5px;
    font-family: "微软雅黑";
    font-size: 16px;
    font-weight: bold;
}

.dialog-box-title {
    height: 60px;
    background: #f8f8f8;
    border-bottom: #ccc 1px solid;
    line-height: 60px;
    text-align: center;
    font-size: 25px;
}

.dialog-box-title h3 {
    font-weight: normal;
    float: left;
    width: 750px;
}

.dialog-box-close {
    font-size: 35px;
    margin-left: 0px;
    margin-right: 20px;
    font-weight: normal;
    float: right;
    cursor: pointer;
    display: inline-block;
    float: right;
}
</style>